<template>
  <Dialog :visible.sync="dialog.visible" :title="dialog.title" :width="dialog.width" @onClose='onClose'
    @onConfirm='confirm' :height="dialog.height">
    <template v-slot:content>
      <el-form ref="ruleFormRef" :model="addBannerModel" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="轮播图标题" prop="bannerTitle">
          <el-input v-model="addBannerModel.bannerTitle" />
        </el-form-item>
        <el-form-item label="链接地址" prop="src">
          <el-input v-model="addBannerModel.src" />
        </el-form-item>
        <el-form-item label="上传图片" prop="url">
          <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload" :auto-upload="false" :on-change="fileSelect" ref="uploadRef">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" width="120" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button class="ml-3" type="success" @click="submitUpload">
            上传到服务器
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </Dialog>
</template>

<script setup >
import { ref, reactive } from 'vue'
import { useDialog } from '@/hooks/useDialog'
import Dialog from '@/components/dialog/Dialog.vue';
import { useAddBanner } from '@/composables/banner/useAddBanner'
import { useBaseModel } from '@/composables/banner/useBaseModel'
const emit = defineEmits(['save'])
const { addBannerModel, rules } = useBaseModel()
const { dialog, onClose, onShow } = useDialog();

const { ruleFormRef, confirm, show, imageUrl } = useAddBanner(dialog, onClose, onShow, addBannerModel, emit)
//暴露方法
defineExpose({
  show
})
const uploadUrl = ref('/api/api/system/banner/upload')
const formSize = ref('default')

const uploadRef = ref()
const fileSelect = (uploadFile) => {
  ElMessage.success('选择文件成功!')
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  ElMessage.success('上传成功!')
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  addBannerModel.url = response
}

const beforeAvatarUpload = (rawFile) => {
  const fileTypes = ['image/jpeg', 'image/png', 'image/jpg']
  if (fileTypes.indexOf(rawFile.type) === -1) {
    ElMessage.error('图片类型是:jpeg,png,jpg')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超规格 2MB!')
    return false
  }
  return true
}
const submitUpload = () => {
  uploadRef.value.submit()
}

</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  display: flex;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  width: 120px;
  height: 120px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>